<template>
  <div class="chart-wrappera">
    <div class="chart-wrappers" ref="typeCount"></div>
    <div class="center_top">
      <span class="boxTitle">担保类型</span>
    </div>
    <div class="chart-wrappers" ref="typeCountBottom"></div>
  </div>
</template>

<script>
import echarts from "echarts";
import { onMounted, onBeforeUnmount, ref, watch } from "vue";
import { debounce } from "@/utils/index.js";

export default {
  name: "typeCount",
  setup() {
    const typeCount = ref(null);
    let myChart = ref(null);
    const typeCountBottom = ref(null);
    let myCharts = ref(null);

    const resizeHandler = debounce(() => {
      if (myChart) {
        myChart.resize();
      }
      if (myCharts) {
        myCharts.resize();
      }
    }, 200);

    onMounted(() => {
      // getPieData();
      window.addEventListener("resize", resizeHandler);
    });
    onBeforeUnmount(() => {
      window.removeEventListener("resize", resizeHandler);
    });
    setTimeout(function () {
      // 柱状图
      myChart = echarts.init(typeCount.value);
      let countryColors = {
        短期周转贷: "#00ED00 ",
        短期抵押贷: "#FF7723",
        直贷: "#8E30FF",
        再贷: "#4678C3",
        助贷: "#00BAFF",
      };
      var option;
      option = {
        color: ["#6afef9"],
        barWidth: 30,
        grid: {
          top: "40px",
          left: "40px",
          right: "40px",
          bottom: "60px",
        },
        title: {
          text: "（万元）",
          x: "right", //水平安放位置，默认为'left'，可选为：'center' | 'left' | 'right' | {number}（x坐标，单位px）
          y: "tuo",
          // backgroundColor: "#fff", //标题背景颜色，默认'rgba(0,0,0,0)'透明
          textStyle: {
            //主标题文本样式{"fontSize": 18,"fontWeight": "bolder","color": "#333"}
            fontSize: 12,
            fontStyle: "normal",
            fontWeight: "normal",
            color: "#fff",
          },
        },
        xAxis: {
          type: "category",
          data: ["短期周转贷", "短期抵押贷", "直贷", "再贷", "助贷"],
          axisLine: {
            //这是x轴文字颜色
            lineStyle: {
              color: "#fff",
            },
          },
          splitLine: {
            show: false,
          },
        },
        yAxis: {
          type: "value",
          axisLine: {
            //这是x轴文字颜色
            lineStyle: {
              color: "#fff",
            },
          },
          splitLine: {
            show: false,
          },
        },
        series: [
          {
            data: [120, 200, 150, 80, 70],
            type: "bar",
            itemStyle: {
              color: function (param) {
                return countryColors[param.name] || "#fff";
              },
            },
          },
        ],
      };
      myChart.setOption(option, true);
      // 折线图
      myCharts = echarts.init(typeCountBottom.value);
      var options;
      options = {
        color: ["#00ED00", "#FF7723", "#8E30FF", "#4678C3", "#00BCFF"],
        legend: {
          top: "bottom",
          show: false,
        },
        toolbox: {
          show: true,
          feature: {
            mark: { show: true },
            dataView: { show: true, readOnly: false },
            restore: { show: true },
            saveAsImage: { show: true },
          },
        },
        series: [
          {
            name: "Nightingale Chart",
            type: "pie",
            radius: [50, 150],
            center: ["50%", "50%"],
            roseType: "area",
            itemStyle: {
              borderRadius: 8,
            },
            data: [
              { value: 40, name: "其它5%-70,000,000.00" },
              { value: 38, name: "保证15%-200,000,000.00" },
              { value: 32, name: "证明15%-200,000,000.00" },
              { value: 30, name: "质押15%-200,000,000.00" },
              { value: 28, name: "抵押35%-400,000,000.00" },
            ],
          },
        ],
      };
      myCharts.setOption(options, true);
    }, 0);
    return {
      typeCount,
      typeCountBottom,
    };
  },
};
</script>
<style scoped>
.chart-wrappera {
  width: 100%;
  height: calc(100% - 30px);
  /* display: flex; */
  /* flex-wrap: wrap; */
}
.chart-wrappers {
  height: 50%;
}
.center_top {
  width: 100%;
  height: 0px;
  border: 1px solid #1dc9f4;
  opacity: 0.49;
  margin: 5px 0;
  width: 100%;
}
.boxTitle {
  font-size: 16px;
  font-weight: 400;
  color: #52ffff;
  padding-left: 12px;
  padding-right: 45px;
  padding-bottom: 0px;
  margin-top: 5px;
  background: linear-gradient(to right, #00baff, rgba(0, 186, 255, 0.5));
  -webkit-clip-path: polygon(0px 0, 100% 0, 80% 100%, 0px 100%, 0 100%);
  clip-path: polygon(0px 0, 100% 0, 85% 100%, 0 100%, 0 100%);
}
</style>